<template>
	<el-dialog :title="dialogTitle" :visible.sync="visible" append-to-body width="560px">
		<el-form ref="form" size="medium" :model="departFrom" :rules="departRules" label-width="90px" class="depart_form_wrapper">
			<el-form-item label="上级院系" prop="pid">
				<sw-search-tree-select
					v-model="departFrom.pid"
					:tree-data="departTree"
					:default-props="defaultProps"
					:disabled="isDisabled"
					placeholder="院系"
					style="width: 100%"
				></sw-search-tree-select>
			</el-form-item>
			<el-form-item label="院系名称" prop="name">
				<el-input v-model="departFrom.name"></el-input>
			</el-form-item>
			<el-form-item label="院系描述">
				<el-input type="textarea" v-model="departFrom.content"></el-input>
			</el-form-item>
			<el-row>
				<el-col :span="15">
					<el-form-item label="是否使用" prop="del">
						<el-radio-group v-model="departFrom.del">
							<el-radio label="1">有效</el-radio>
							<el-radio label="2">无效</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="9">
					<el-form-item label="排序">
						<el-input-number v-model="departFrom.sort" controls-position="right" :min="1" :max="999"></el-input-number>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" :loading="btnLoading" @click="handleSubmitForm">{{ addOrEdit ? '新增' : '修改' }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
import { addedDepart, updateDepart } from '@/api/system/tbSysDept';
export default {
	props: {
		value: {
			type: Boolean,
			default: false
		},
		departData: {
			type: Object,
			default() {
				return {};
			}
		},
		departList: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			visible: this.value,
			departFrom: {},
			departRules: {
				pid: [{ required: true, message: '请选择上级院系', trigger: 'change' }],
				name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
				del: [{ required: true, message: '请选择字典类型', trigger: 'change' }]
			},
			defaultProps: {
				label: 'name',
				children: 'childList'
			},
			btnLoading: false
		};
	},
	computed: {
		addOrEdit() {
			let flag = null;
			let type = this.departData.type;
			if (type === 'add' || type === 'addSub') {
				flag = true;
			} else if (type === 'edit') {
				flag = false;
			}
			return flag;
		},
		dialogTitle() {
			return `${this.addOrEdit ? '新增' : '修改'}院系`;
		},
		isDisabled() {
			return this.departData.type === 'addSub';
		},
		departTree() {
			let arr = [];
			if (Object.keys(this.departData).length > 0) {
				if (!this.addOrEdit) {
					let data = this.$lodash.cloneDeep(this.departList);
					this.$removeNodeInTree(data, this.departData.data.id, 'childList');
					arr = [...data];
				} else {
					arr = [...this.departList];
				}
			}
			return [
				{
					id: '0',
					name: '顶级院系',
					childList: arr
				}
			];
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.$nextTick(() => {
				this.$refs['form'].resetFields();
				if (!this.addOrEdit) {
					this.departFrom = { ...this.departData.data };
				} else if (this.departData.type === 'addSub') {
					this.departFrom = { pid: this.departData.data.id, sort: '1' };
				} else if (this.departData.type === 'add') {
					this.departFrom = { pid: '0', sort: '1' };
				}
			});
		}
	},
	methods: {
		handleSubmitForm() {
			this.$refs['form'].validate(async (valid) => {
				if (!valid) return false;
				this.btnLoading = true;
				await this.submitFormRequest();
				this.btnLoading = false;
			});
		},

		//添加/修改枚举请求
		async submitFormRequest() {
			let params = { ...this.departFrom, systemKey: '1' };
			let requestFun = eval(this.addOrEdit ? addedDepart : updateDepart);
			let result = await requestFun(params).then((res) => res.data);
			if (result.code === '0') {
				this.$emit('refresh');
				this.visible = false;
				this.$showCustomMessage('success', `${this.addOrEdit ? '新增' : '修改'}院系成功`);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.depart_form_wrapper::v-deep {
	width: 100%;
	padding: 10px 6px 0 0;
	box-sizing: border-box;
	.el-input-number {
		width: 100%;
	}
}
</style>
